<template>
  <a-form
    ref="formRef"
    :model="formState"
    name="basic"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 14 }"
    autocomplete="off"
    @finish="onFinished"
    @finishFailed="onFinishFailed"
  >
    <a-form-item label="号码" name="code" :rules="[{ required: true, message: '请输入' }]">
      <a-input v-model:value="formState.code" />
    </a-form-item>

    <a-form-item label="名称" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>

    <a-form-item label="类型" name="type">
      <a-select ref="select" placeholder="请选择" v-model:value="formState.type">
        <a-select-option v-for="item in typeOptions" :key="item.id" :value="item.id">{{
          item.name
        }}</a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="传输模式" name="mode" :rules="[{ required: true, message: '请输入' }]">
      <a-select ref="select" placeholder="请选择" v-model:value="formState.mode">
        <a-select-option v-for="item in modeOptions" :key="item.id" :vlalue="item.id">{{
          item.name
        }}</a-select-option>
        <a-select-option value="2">主动采集</a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="采集间隔" name="gap">
      <a-select ref="select" placeholder="请选择" v-model:value="formState.gap">
        <a-select-option :value="10 * 60">10分钟</a-select-option>
        <a-select-option :value="30 * 60">半个小时</a-select-option>
        <a-select-option :value="60 * 60">1个小时</a-select-option>
        <a-select-option :value="4 * 60 * 60">2个小时</a-select-option>
        <a-select-option :value="5 * 60 * 60">4个小时</a-select-option>
        <a-select-option :value="6 * 60 * 60">6个小时</a-select-option>
        <a-select-option :value="7 * 60 * 60">12个小时</a-select-option>
        <a-select-option :value="8 * 60 * 60">24个小时</a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="采集托管" name="enable">
      <a-radio-group v-model:value="formState.enable">
        <a-radio :value="true">启用</a-radio>
        <a-radio :value="false">禁用</a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item label="备注" name="remark">
      <a-input v-model:value="formState.remark" />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 6, span: 16 }">
      <a-button type="primary" html-type="submit">确定</a-button>
    </a-form-item>
  </a-form>
</template>
  <script lang="ts">
import { defineComponent, ref } from 'vue';
import { defHttp } from '/@/utils/http/axios';

interface FormState {
  code: string;
  name: string;
  remark: string;
  type: string;
  mode: string;
  gap: string;
  enable: boolean;
  serialNo:string;
  pid: Number
}
export default defineComponent({
  setup(props, { emit }) {
    const typeOptions = ref([]);
    const modeOptions = ref([]);
    const formRef = ref();

    let formState = ref<FormState>({
      code: '',
      name: '',
      remark: '',
      type: '',
      mode: '',
      gap: '',
      enable: true,
      pid:0,
      serialNo:"",
    });

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };

    const setForm = (formData) => {
      if (formData) {
        // console.log(formData.code, formData.id);
        formState.value = formData;
      } else {
        formRef.value.resetFields();
      }
      // console.log(formState.value.code, 2222);
    };

    const onFinished = (event) => {
      // console.log(event.code);
      emit('finished', { ...event });
    };

    function getTypeOptions() {
      defHttp.get({ url: '/dtu-type/get-all' }).then((res) => {
        typeOptions.value = res.data;
      });
    }

    function getModeOptions() {
      defHttp.get({ url: '/dtu-tran-mode/get-all' }).then((res) => {
        modeOptions.value = res.data;
      });
    }

    getTypeOptions();
    getModeOptions();

    return {
      formState,
      onFinishFailed,
      setForm,
      formRef,
      onFinished,
      typeOptions,
      modeOptions,
    };
  },
});
</script>
  
